<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单-v-model</title>
</head>
<body>
    
    <div id="app">
        <!-- 文本框 -->
        <h1>{{input_textMsg}}</h1>
        <input type="text" name="" id="" v-model="input_textMsg"/>

        <hr />
        <!-- 单选 -->
        <h1>{{input_radioMsg}}</h1>
        <label for="male">男</label>  <input type="radio" value="男" id="male" name="gender" v-model="input_radioMsg" />
        <label for="female">女</label><input type="radio" value="女" id="female" name="gender" v-model="input_radioMsg" />

        <hr />
        <!-- 多选 -->
        <h1>{{multChoiceInfo}}</h1>
        <label for="11">11</label><input type="checkbox" name="multChoice" id="11" v-model="multChoiceInfo" value="11" />
        <label for="33">33</label><input type="checkbox" name="multChoice" id="33" v-model="multChoiceInfo" value="33" />
        <label for="22">22</label><input type="checkbox" name="multChoice" id="22" v-model="multChoiceInfo" value="22" />

        <hr />
        <!-- 下拉选择 -->
        <h1>{{downDropInfo}}</h1>
        <select v-model="downDropInfo"> 
            <!-- 注意v-model写在select身上 -->
            <option value="请选择" >请选择</option>
            <option value="11111" >11111</option>
            <option value="22222" >22222</option>
            <option value="33333" >33333</option>
        </select>

    </div>
    
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data(){
                return{
                    // <!-- 文本框 -->
                    input_textMsg:"hello!",

                    // <!-- 单选 -->
                    input_radioMsg:"男", //默认选择男性
                    // input_radioMsg:"", 为空值则是无默认选择

                    // <!-- 多选 -->
                    multChoiceInfo:["11", "22"], //一定要写数组，否则会是全选！

                    // <!-- 下拉选择 -->
                    downDropInfo:"请选择", // 不用数组！！！！

                }
            },
            methods:{},
            computed:{},
            watch:{}
        })
    </script>


</body>
</html>